<template>
  <section class="yjwzSelectMapBox">
    <div class="wzxqyfb_selectMap_search">
      <p>请选择应急物资名称 |</p>
      <el-select v-model="value" filterable placeholder="请选择" @change="handleChecked">
        <el-option
          v-for="item in selectData"
          :key="item.materialTypeCode"
          :label="item.materialTypeName"
          :value="item.materialTypeCode"
        ></el-option>
      </el-select>
    </div>
  </section>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { yjwzServer } from "@/api/installServer";
import MapCommon from "@/util/MapCommon";
@Component({
  name: "YjwzMapSelect",
  mixins: [MapCommon]
})
export default class YjwzMapSelect extends Vue {
  private selectData: any = [
    // {
    //   materialTypeCode: '选项1',
    //   materialTypeName: 'N95口罩',
    // },
    // {
    //   materialTypeCode: '选项2',
    //   materialTypeName: 'N95口罩',
    // },
    // {
    //   materialTypeCode: '选项3',
    //   materialTypeName: 'N95口罩',
    // },
    // {
    //   materialTypeCode: '选项4',
    //   materialTypeName: 'N95口罩',
    // },
    // {
    //   materialTypeCode: '选项5',
    //   materialTypeName: 'N95口罩',
    // },
  ];

  private value: string = "";

  private inertval: any;

  private materialList0: any = [];
  private materialList1: any = [];

  private gisLodingEnd: boolean = false;

  private async handleChecked(checked: any) {
    this.value = checked;
    const gisNeed = this.filterList(checked);
    if (gisNeed.length) {
      (this as any).resolveMap("map").then(() => {
        const component = this.getComponent();
        component.unload();
        component.load(gisNeed);
      });
    }else{
      (this as any).resolveMap("map").then(() => {
        const component = this.getComponent();
        component.unload();
      });
    }
  }

  // 获取应急物资类型
  private getMaterialType() {
    yjwzServer.getMaterialType().then((res: any) => {
      if (res.data.data.length) {
        this.selectData = res.data.data;
        let value = res.data.data[0].materialTypeCode;
        this.handleChecked(value);
      }
    });
  }

  /**
   * 获取物资列表
   * needMaterialType: 0 - 供应单位 1 - 需求单位
   */
  private getMaterialList(opt: any) {
    return new Promise((resolve, reject) => {
      yjwzServer.getMaterialList(opt).then((res: any) => {
        if (res.data.data.length && opt.needMaterialType === "1") {
          res.data.data.needMaterialType = opt.needMaterialType;
          this.materialList1 = res.data.data;
        }
        if (res.data.data.length && opt.needMaterialType === "0") {
          res.data.data.needMaterialType = opt.needMaterialType;
          this.materialList0 = res.data.data;
        }
        resolve();
      });
    });
  }

  // 通过物资所选类型从物资列表中过滤
  private filterList(code: string) {
    const needList: any = [];
    for (const item of this.materialList0) {
      if (item.materialTypeCode === code) {
        needList.push(item);
      }
    }
    for (const item of this.materialList1) {
      if (item.materialTypeCode === code) {
        needList.push(item);
      }
    }
    return needList;
  }

  private updateMaterial() {
    Promise.all([
      this.getMaterialList({ needMaterialType: "1" }),
      this.getMaterialList({ needMaterialType: "0" })
    ]).then(() => {
      this.getMaterialType();
    });
  }

  private created() {
    this.updateMaterial();
    this.inertval = setInterval(() => {
      this.updateMaterial();
    }, 300000);
  }

  private getComponent() {
    const modules = (this as any).$ioc.resolve("GISModules-map");
    const component = modules.eventSituation.getComponent("material");
    return component;
  }

  private mounted() {
    (this as any).resolveMap("map").then(() => {
      this.gisLodingEnd = true;
    });
  }

  // 默认选择第一个
  @Watch("materialList1")
  private defaultSelsect() {
    if (this.materialList1.length && this.gisLodingEnd && this.selectData.length > 0) {
      this.handleChecked(this.selectData[0].materialTypeCode);
    }
  }

  private beforeDestroy() {
    this.getComponent().unload();
    clearInterval(this.inertval);
  }
}
</script>
<style lang="less">
.yjwzSelectMapBox {
  position: absolute;
  z-index: 10;
  top: 180px;
  left: -398px;
}
.wzxqyfb_selectMap_search {
  /*width: 432px;*/
  height: 40px;
  line-height: 40px;
  display: flex;
  color: #c2e7f2;
  background: rgba(0, 33, 56, 0.6);
  box-shadow: inset 0px 0px 9px 0px rgba(0, 227, 255, 0.7);
  border: solid 1px #00e3ff;
  border-radius: 4px;
  margin-bottom: 6px;
  margin-top: 6px;
  p {
    padding-left: 20px;
  }
  & .el-input__inner {
    background-color: transparent;
    border: none;
    color: #c2e7f2;
  }
}
/*.yjwzxqhz {*/
/*  & td:nth-of-type(2) {*/
/*    color: #1dfe8d;*/
/*  }*/
/*}*/
/*.yjwzhz {*/
/*  & td:nth-of-type(2) {*/
/*    color: #e8643d;*/
/*  }*/
/*}*/
</style>
